<template>
  <div class="health-care-container">
    <!-- 标题和新增按钮 -->
    <div class="header-group">
      <h2 class="title">保健信息</h2>
      <el-button type="primary" size="small" @click="handleAddRow" class="add-btn">
        新增行3333
        新增行1111
      </el-button>
    </div>

    <!-- 表格内容 -->
    <el-table :data="tableData" border style="width: 100%; margin-top: 10px;"
      :header-cell-style="{ 'background-color': '#f5f7fa' }">
      <el-table-column prop="feedingDays" label="饲养天数" align="left" width="200">
        <template #default="scope">
          <template v-if="scope.row.isEditing">
            <el-input v-model="scope.row.feedingDays" size="small" placeholder="请输入饲养天数" type="number"></el-input>
          </template>
          <template v-else>
            {{ scope.row.feedingDays }}
          </template>
        </template>
      </el-table-column>

      <el-table-column prop="healthMethod" label="保健方式" align="left" width="250">
        <template #default="scope">
          <template v-if="scope.row.isEditing">
            <el-input v-model="scope.row.healthMethod" size="small" placeholder="请输入保健方式"></el-input>
          </template>
          <template v-else>
            {{ scope.row.healthMethod }}
          </template>
        </template>
      </el-table-column>

      <el-table-column prop="healthWay" label="保健方法" align="left" width="250">
        <template #default="scope">
          <template v-if="scope.row.isEditing">
            <el-input v-model="scope.row.healthWay" size="small" placeholder="请输入保健方法"></el-input>
          </template>
          <template v-else>
            {{ scope.row.healthWay }}
          </template>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="left" width="180">
        <template #default="scope">
          <template v-if="scope.row.isEditing">
            <el-button type="primary" size="mini" @click="handleSave(scope.$index)" class="mr-1">
              保存
            </el-button>
            <el-button type="default" size="mini" @click="handleCancel(scope.$index)">
              取消
            </el-button>
          </template>
          <template v-else>
            <el-button type="text" size="mini" @click="handleEdit(scope.$index)" class="mr-1 text-blue-600">
              修改
            </el-button>
            <el-button type="text" size="mini" @click="handleDelete(scope.$index)" class="text-red-600">
              删除
            </el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

// 表格数据
const tableData = ref([
  {
    id: 1,
    feedingDays: 35,
    healthMethod: '兔瘟单苗',
    healthWay: '皮下注射',
    isEditing: false
  },
  {
    id: 2,
    feedingDays: 40,
    healthMethod: '巴二联苗',
    healthWay: '皮下注射',
    isEditing: false
  }
]);

// 新增行
const handleAddRow = () => {
  tableData.value.push({
    id: Date.now(), // 使用时间戳作为唯一ID
    feedingDays: '',
    healthMethod: '',
    healthWay: '',
    isEditing: true // 新增行默认进入编辑状态
  });
};

// 编辑行
const handleEdit = (index) => {
  // 保存原始数据用于取消操作时恢复
  tableData.value[index].originData = { ...tableData.value[index] };
  tableData.value[index].isEditing = true;
};

// 保存我的行数据
const handleSave = (index) => {
  const row = tableData.value[index];

  // 简单验证
  if (!row.feedingDays || !row.healthMethod || !row.healthWay) {
    ElMessage.warning('请填写完整信息');
    return;
  }

  // 标记为非编辑状态
  row.isEditing = false;
  ElMessage.success('保存成功');

  // 实际项目中这里可以调用API保存到后端
  // console.log('保存数据:', row);
};

// 取消编辑
const handleCancel = (index) => {
  const row = tableData.value[index];

  // 如果是新增的空行，取消时直接删除
  if (row.id.toString().length > 10 && // 判断是否是时间戳ID
    !row.feedingDays && !row.healthMethod && !row.healthWay) {
    tableData.value.splice(index, 1);
  } else {
    // 恢复原始数据
    if (row.originData) {
      tableData.value[index] = { ...row.originData };
    } else {
      row.isEditing = false;
    }
  }
};

// 删除行
const handleDelete = (index) => {
  // 实际项目中可以增加确认对话框
  tableData.value.splice(index, 1);
  ElMessage.success('删除成功');

  // 实际项目中这里可以调用API删除后端数据
  // console.log('删除索引:', index);
};
</script>

<style scoped>
.health-care-container {
  max-width: 1000px;
  margin: 20px;
  padding: 15px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-group {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.title {
  font-size: 16px;
  color: #1f2329;
  margin: 0;
  font-weight: 500;
}

.add-btn {
  margin-left: 15px;
}

::v-deep .el-table th {
  font-weight: 500;
  color: #4e5969;
}

::v-deep .el-button--text {
  padding: 0 5px;
}
</style>
